<template>
  <!--优惠券-->
  <div>
    <swiper :imgList="imgList"></swiper>
    <p class="names">{{goods.goodsName}}</p>
    <ul class="price">
      <li>市场价：{{goods.goodsPrice}}元</li>
      <li><span>会员价：{{goods.vipPrice}}元</span><span class="xiaoliang">销量：{{goods.sales}}</span></li>
    </ul>
    <div class="divide"></div>
    <p class="title">详情介绍</p>
    <div class="detail">
      <p v-html="goods.goodsDesc"></p>
    </div>
    <ul class="bottom" >
      <li><p>￥200</p>支付积分</li>
      <li> <wv-button type="default" :plain="true" @click="isvisible=true">兑换</wv-button></li>
    </ul>
    <gouwuche :cartParams="cartParams" :goods="goods"></gouwuche>
  </div>
</template>

<script type="text/ecmascript-6">
  import swiper from '../offertemplate/imgswipertemplate'
  import gouwuche from '../offertemplate/gouwuche'
  import {getGoodDetail} from '../../../test/unit/http'
  import {wxApi} from '../../../test/unit/flyme_weixin'
  import global from '../../../test/unit/global'

  import {Toast} from 'we-vue'
  export default {
    name: 'youhuiquan',
    props: {},
    data() {
      return {
        imgList: [],
        goods: {},
        cartParams: {desc: '立即预定'}
      };
    },
    methods: {
      getGoodsDetail(params){
        let that = this;
        getGoodDetail(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            that.goods = res.object.goods;
            let goodsImg = that.goods.goodsImg;
            if (!that.$myUtils.isNull(goodsImg)) {
              that.imgList = goodsImg.split(",");
            }
            that.cartParams['desc'] = '立即购买';
            that.cartParams['categoryCode'] = 'coupons';
          } else {
            Toast.fail(res.info)
          }
        })
      }
    },
    created() {
      let goodsId = this.$route.query.goodsId;
      let params = {goodsId: goodsId};
      this.getGoodsDetail(params);
      let url = window.location.href;
      let shareUrl = this.$myUtils.initShareUrl(url);
      let that=this;
      wxApi.init(function () {
        wxApi.updateAppMessageShareData(that.goods.goodsName, that.goods.goodsName, shareUrl,  global.ImgBaseURL+'/'+that.goods.coverImg)
      });
    },
    components: {
      swiper,
      gouwuche
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .bottom{
    background-color: #eee;
    display: flex;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
    li{
      flex: 1;

    }
    :first-child {
      font-size: 12px;
      color: #999;
      text-align: left;
      p{
        color: #fc8d4e;
        font-size: 18px;
      }
    }
    :last-child{
      button{
        background-image: linear-gradient(to left, #ff8551,#f9964e);
        color: #fff;
        height: 40px;
        line-height: 40px;
        border-radius: 25px;
        border:none;
        width: 160px;
        text-align: center;
      }
    }
  }
  .names{
    font-size: 18px;
    color: #111;
    font-weight: 700;
    padding: 10px;
    text-align: left;
  }
  .price{
    padding: 10px;
    text-align: left;
    li:first-child{
      font-size: 15px;
      color: #999;
    }
    li:last-child{
      font-size: 15px;
      color: #000;
      font-weight: 700;
      .xiaoliang{
        float: right;
        font-size: 12px;
        color: #999;
      }
    }
  }
  .title{
    font-size: 16px;
    color: #999;
    font-weight: 700;
    padding: 10px;
    text-align: left;
  }
  .divide{
    background-color: #eee;
    height: 10px;
  }
  .detail{
    font-size: 15px;
    color: #666;
    text-align: left;
    padding: 10px 10px 70px;

    p{
      text-indent: 30px;
      line-height: 25px;
    }
    ul{
      margin-top: 10px;
      li{
        line-height: 25px;
      }
    }
  }
</style>
